<!DOCTYPE html>
 
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>Mitfahrzentrale - SS12</title>

 		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
 		<meta charset="UTF-8" />

		<!-- jQuery Bibliothek -->
		<script type="text/javascript" src="jquery-1.7.2.js"></script>
		
		<!-- DatePicker (PopUp zum Auswählen eines Datums). Aus dem Internet geklaut. -->
		<link rel="stylesheet" type="text/css" href="jquery.datepick.css" />		
		<script type="text/javascript" src="jquery.datepick.js"></script>	
		<script type="text/javascript" src="jquery.datepick-de.js"></script>
		
		<!-- Google Maps API -->
		<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
		
		<!-- JavaScript und StyleSheet für Mitfahrzentrale -->
		<link rel="stylesheet" type="text/css" href="mfz.css" />
		<script type="text/javascript" src="mfz.js"></script>	
		<script type="text/javascript">		
				
			$(document).ready(function(){
			//--------- Events on jQuery einrichten. Also was bei gewissen Aktionen passieren soll		
				$('input').focusout(function() {
					$('input').removeClass("highlight"); 
				});
			
				$('input.withhighlight').focusin(function() {
					$(this).addClass("highlight"); 
				});
				$('form#SearchForm').submit(function() {
					onSubmit_SearchForm(); //Funktion in mfz.js ausgelagert
		            return false; //<-- verhindert, dass der Browser die Form an den Server schickt
				});
				
				$('form#newForm').submit(function() {
					onSubmit_newForm(); //Funktion in mfz.js ausgelagert
		            return false; //<-- verhindert, dass der Browser die Form an den Server schickt
				});	
				
				$('form#loginForm').submit(function() {
					onSubmit_loginForm(); //Funktion in mfz.js ausgelagert
		            return false; //<-- verhindert, dass der Browser die Form an den Server schickt
				});	
				
				///KK Beginn			
				$('form#newUserForm').submit(function() {
					onSubmit_newUserForm(); //Funktion in mfz.js ausgelagert
		            return false; //<-- verhindert, dass der Browser die Form an den Server schickt
				});
				///KK Ende

				/* Wenn ein PopUp offen ist und auf den grauen Hintergrund geklickt wird, dann 
					werden alle PopUps ausgelendet*/
				$("#backgroundPopup").click(function(){
					disablePopup();
				});
				//Selbiges, wenn jemand ESC drückt
				$(document).keypress(function(e){
					if(e.keyCode==27 )
						disablePopup();
				});
				
				$('input#[name="tag"]').datepick({dateFormat: 'dd.mm.yyyy'});
				$('input#[name="abdatum"]').datepick({dateFormat: 'dd.mm.yyyy'});
				$('input#[name="andatum"]').datepick({dateFormat: 'dd.mm.yyyy'});
			
				
			/*----- Initialisieren: ---------------------------
					1. Alle "Seiten" ausblenden
					2. Homeseite einblenden*/
				disaleAll();
				showContentDiv('welcome');
			//----- Login oder Logout anzeigen ---------------------------
				/*Erst einmal Logout ausblenden und Login anzeigen. Dann wird mit CheckIsLoggedIn 
				assynchron geprüft, ob aktuelle ein Sitzungs-Cookie existiert und dieser gültig ist.
				Wenn ja, dann erscheint kurz darauf Logout anstatt Login. 
				Außerdem hat diese Funktion gleich am Anfang den Vorteil, dass die Verbindung zum
				Server geprüft wird und ggf. sofort eine Fehlermeldung kommt.*/
				showLoginOrLogout(false); //Login wird angezeigt
				CheckIsLoggedIn();
			
			//Fenstergröße anpassen
				divsAnordnen();
				$(window).resize(function(){
					divsAnordnen();
	            });				
			});//$document.ready ende
			
			
	//--------- Funktionen für Menübuttons ---------	
			
			/*Erklärung Oberfläche/Menü:
			- Für jede "Seite" gibt es in dieser HTML Datei ein DIV Element (class = content)
			- Je nachdem, wo man sich gerade befindet, wird das eine oder das andere DIV eingelendet.
			Beim Klick auf einen Menü-Button werden
			1. Alle Divs ausgeblendet
			2. Genau ein DIV angezeigt
			3. Das aktuelle DIV wird zentriert und das Menü auf die gleiche Breite gestellt (sieht schöner aus)*/
			function disaleAll() {
				$('div.content').hide(); //alle DIVs mit der class "content" werden ausgeblendet
				$('div#MessageWindow').hide();
			}
			function menuShowFahrtenListe() {
				showContentDiv('FahrtenListe');
				/*ClearFahrtenListe();
				$("#zeile_blanko").delay(500).fadeIn(500);*/	
			}
			function menuShowNeuForm() {
				showContentDiv('NeuForm');
				ClearNeuForm();
			}
			function menuShowNeuUserForm() {
				showContentDiv('NeuUserForm');
				ClearNeuUserForm();
			}
			
			function menuShowMeineFahrten(){
				showContentDiv('meineFahrtenListe');
				loadMeineFahrten();
			}
			
			
			function showContentDiv(divName) {
				disaleAll();
				divsAnordnen(divName); //schon vorarb das Div richtig platzieren. dann sieht das Einblenden schöner aus
				$('div#'+divName).fadeIn(500, 
						function() {
							divsAnordnen(); //Sobald das Div fertig angezeigt wurde, wird die Breite usw. angepasst
						}
					);
			}
			function menuLogout() {		
				Logout();
			}
			function menuLogin() {		
				DoOnFailureReturned('LoginRequired', '');
			}

		</script>		
	</head>

	<body leftmargin="0" rightmargin="0">
	<!--  div id="pagecontainer" style="padding: 0px;"-->
	
	
		
		<div id="menucontainer">
		<table cellpadding="0" cellspacing="0" height="100%" width="100%" style="table-layout:fixed;">
			<tbody>
			<tr height="4">
				<td width="4"></td>
				<td width="*"></td>
				<td width="4"></td>
			</tr>
			
			<tr>
				<td></td>
				<td>
					<div id="menu">
						<div id="menuhead">
							Mitfahrzentrale
						</div>
						<div id="menubody">
							<center>
							<div class="float" id="menuListe"><a href="#" onClick="menuShowFahrtenListe();" >Fahrt suchen</a></div>&nbsp;
							<div class="float" id="menuNeu"><a href="#" onClick="menuShowNeuForm();" >Fahrt eintragen</a></div>&nbsp;
							<div class="float" id="menuMeineFahrten"><a href="#" onClick="menuShowMeineFahrten();" >meine Fahrten</a></div>&nbsp;
							<div class="float">|</div>&nbsp;
							<div class="float" id="menuNeuUser"><a href="#" onClick="menuShowNeuUserForm();" >Registrieren</a>&nbsp;</div>
							<div class="float" id="menuLogin"><a href="#" onClick="menuLogin();" >Login</a></div>
							<div class="float" id="menuLogout"><a href="#" onClick="menuLogout();" >Logout</a></div>&nbsp;
							</center>
						</div>
						<div id="menufooter">
						</div>
					</div>
				</td>
				<td>&nbsp;</td>
			</tr><tr height="3">
				<td></td>
				<td></td>
				<td></td>
			</tr>
			</tbody>
		</table>
		
		</div> <!-- menucontainer -->
		
		
		<div id="welcome" class="content">
			<div class="mainheader">
				&lt;&lt; Herzlich Willkommen bei unserer Mitfahrzentrale &gt;&gt;
			</div>
			
			
			
			<div class="main" id="main_welcome">
				
			<center><img src = "anhalter.jpg"/></center>
					
			</div>
			
			<div class="mainfooter">
				&nbsp;
			</div>
		</div>
		
		
		
		
		<div id="FahrtenListe" class="content">
			<div class="mainheader">
				&lt;&lt; Suche &gt;&gt;
			</div>
			<div class="mainbar">
				<form id="SearchForm" method="post">
				<div class="float">
					<div class="searchmenu1">Von</div>
					<div class="searchmenu2"><input type="text" class="withhighlight" name="von" value="" /></div>
					<input type="hidden" name="letztesuche_von" value="" />
					<!-- Die letzte Usereingabe wird in den Feld letztesuche_von zwischengespeichert. braucht man für Mitfahren -->
				</div>
				<div class="float">
					<div class="searchmenu1">Nach</div>
					<div class="searchmenu2"><input type="text" class="withhighlight" name="nach" value="" /></div>
					<input type="hidden" name="letztesuche_nach" value="" />
				</div>
				<div class="float">
					<div class="searchmenu1">Tag</div>
					<div class="searchmenu2"><input type="text" class="withhighlight" name="tag" value="" /></div>
				</div>
				<div class="float">
					<div class="searchmenu1">&nbsp;</div>
					<div class="searchmenu2"><input type="submit" name="ok_search" value="Suchen" /></div>
				</div>
				</form>
			</div>
			
			<div class="main" id="main_suche">
				<div class="zeile" id="zeile_headline">
					<div class="col1">Abfahrt</div>
					<div class="col3">Bel. Plätze</div>
					<div class="col2">Fahrer</div>
					<div class="col4">Route</div>
				</div>
			
				<!-- Nachfolgende Zeile ist nur sichtbar, wenn keine Ergebnisse gefunden wurden.
				Dies ist außerdem die Blankozeile, welche jedes Mal kopiert wird. -->
				<div class="zeile" id="zeile_blanko">
					<div class="col1">&nbsp;</div>
					<div class="col3">&nbsp;</div>
					<div class="col2">&nbsp;</div>
					<div class="col4">
						Keine Fahrt gefunden
						
						<!-- Für jeden Ort braucht man nachfolgenden Absatz. 
							Dies ist der Blankoabsatz, welcher jedes Mal kopiert wird-->
						<div class="float" id="ort_blanko" style="visibility: hidden;">
						<table cellpadding="0" cellspacing="0" height="30" width="*" style="table-layout:fixed;">
							<tbody><tr>
							<td width="4" style="background-image:url(pfeillinks.png);" /></td>
							<td width="*" style="background-image:url(pfeilhg.png);" id="ort_platzhalter"></td>
							<td width="19" style="background-image:url(pfeilrechts.png);" /></td>
							</tr></tbody>
						</table>
						</div>
						&nbsp;
						<!-- Ende Ort -->
					</div>
				</div>
				<!-- Ende Zeile -->
			</div>
			
			<div class="mainfooter">
				&nbsp;
			</div>
		</div>
		
		
		<!-- Steffi & Katharina 09.06.2012 -->
		
		<div id="meineFahrtenListe" class="content">
			<div class="mainheader">
				&lt;&lt; Meine Fahrten und Mitfahrten &gt;&gt;
			</div>
			
			
			<div class="main" id="main_meineFahrten">
				<div class="zeile" id="zeile_meinefahrten_headline">
					<div class="col5">löschen</div>
					<div class="col1">Abfahrt</div>
					<div class="col3">Bel. Plätze</div>
					<div class="col2">Fahrer</div>
					<div class="col4">Route</div>
					
					
				</div>
			
				<!-- Nachfolgende Zeile ist nur sichtbar, wenn keine Ergebnisse gefunden wurden.
				Dies ist außerdem die Blankozeile, welche jedes Mal kopiert wird. -->
				<div class="zeile" id="zeile_meinefahrten_blanko">
					<div class="col5">&nbsp;</div>
					<div class="col1">&nbsp;</div>
					<div class="col3">&nbsp;</div>
					<div class="col2">&nbsp;</div>
					<div class="col4">Keine Fahrt gefunden</div>
					
				</div>
				<!-- Ende Zeile -->
			</div>
			
			<div class="mainfooter">
				&nbsp;
			</div>
		</div>
		
		
		
		
		<div id="NeuForm" class="content">
			<div class="mainheader">
				&lt;&lt; Neue Fahrt &gt;&gt;
			</div>
			<div class="main" id="main_neuForm">
			<form id="newForm" method="post">
				<div class="newBlock">
					<div class="newLable">Abfahrt</div>
					<div class="newInput"><input type="text" class="withhighlight" name="abdatum" size="10" maxlength="10" value="15.04.2012"></div>
				</div>
				<div class="newBlock">
					<div class="newLable">Uhrzeit</div>
					<div class="newInput"><input type="text" class="withhighlight" name="abzeit" size="5" maxlength="5" value="13:22"></div>
				</div><br/>
				<div class="newBlock">
					<div class="newLable">Ankunft</div>
					<div class="newInput"><input type="text" class="withhighlight" name="andatum" size="10" maxlength="10" value="15.04.2012"></div>
				</div>
				<div class="newBlock">
					<div class="newLable">Uhrzeit</div>
					<div class="newInput"><input type="text" class="withhighlight" name="anzeit" size="5" maxlength="5" value="13:22"></div>
				</div>
				<div>
					<div class="newLable">Von</div>
					<div class="newInput"><input type="text" class="withhighlight" name="von" value="" /></div>
				</div>
				<div id="ueber_div_blanko" class="ueber" > 
					<div class="newLable">Über...</div>
					<div class="newInput"><input type="text" class="withhighlight" onKeyUp="onKey_NeuForm_Ueber();" onChange="onChange_NeuForm_Ueber(this);" name="ueber_blanko" value="" /></div>
				</div>
				<div id="addNewFieldHere"> <!-- Mit addNewFieldHere wird das Div markiert, vor dem ein neues "über"-Feld eingefügt wird-->
					<div class="newLable">Nach</div>
					<div class="newInput"><input type="text" class="withhighlight" name="nach" value="" /></div>
				</div>
				<div>
					<div class="newLable">Plätze</div>
					<div class="newInput"><input type="text" class="withhighlight" name="plaetze" value="3" /></div>
				</div>
				<div>
					<div class="newLable">&nbsp;</div>
					<div class="newInput"><input type="submit" name="ok_new" value="Eintragen" /></div>
				</div>
			</form>
			</div>
			
			<div class="mainfooter">
				&nbsp;
			</div>
		</div>
		
		<div id="NeuUserForm" class="content">
			<div class="mainheader">
				&lt;&lt; Neuer User &gt;&gt;
			</div>
			<div class="main" id="main_newUserForm">
			<form id="newUserForm" method="post">
				<div class="newBlock">
					<div class="newLable">Username</div>
					<div class="newInput"><input type="text" class="withhighlight" name="username" size="20" maxlength="20" value=""></div>
				</div>
				<div class="newBlock">
					<div class="newLable">Passwort</div>
					<div class="newInput"><input type="password" class="withhighlight" name="passwort" size="40" maxlength="40" value=""></div>
				</div><br/>
				<div class="newBlock">
					<div class="newLable">Vorname</div>
					<div class="newInput"><input type="text" class="withhighlight" name="vorname" size="40" maxlength="40" value=""></div>
				</div>
				<div class="newBlock">
					<div class="newLable">Nachname</div>
					<div class="newInput"><input type="text" class="withhighlight" name="nachname" size="40" maxlength="40" value=""></div>
				</div>
				<div>
					<div class="newLable">Email</div>
					<div class="newInput"><input type="text" class="withhighlight" name="email"  size="40" maxlength="40" value=""></div>
				</div>
				<div>
					<div class="newLable">Telefonr.</div>
					<div class="newInput"><input type="text" class="withhighlight" name="telefonnummer"  size="30" maxlength="30" value="" /></div>
				</div>
				<div>
					<div class="newLable">&nbsp;</div>
					<div class="newInput"><input type="submit" name="ok_new" value="Eintragen" /></div>
				</div>
			</form>
			</div>
			
			<div class="mainfooter">
				&nbsp;
			</div>
		</div>
		
	<!-- Grauer Hintergrund für PopUp -->
		<div id="backgroundPopup"></div> 
	<!-- PopUp Fenster für Fehler, Warnungen und Informationen -->
		<div id="MessageWindow" class="isPopUp">
			<div id="MessageHeader">&nbsp;</div>
			<div id="MessageMain">
				&nbsp;
			</div>
			<div id="MessageFooter">
				<a href="#" onClick="disablePopup();">Fenster schließen</a>
			</div>
		</div>

	<!-- PopUp Fenster, welches beim Mitfahren einscheint -->
		<div id="JoinRouteWindow" class="isPopUp">
			<div id="MessageHeader">&nbsp;</div>
				<div id="JoinRouteWindowMain" style="display: block;">				
					<!-- div class="float" style="width: 380px; height: 260px;"-->
					<div style="float: left; max-width: 380px; min-height: 260px;">
						<div class="JoinWindowBlock">
							<div class="JoinWindowLable"><u>Nummer:</u></div>
							<div class="JoinWindowData" id="Join_ID">&nbsp;</div>
						</div>
						<br />
						<div class="JoinWindowBlock">
							<div class="JoinWindowLable"><u>Fahrer:</u></div>
							<div class="JoinWindowData" id="Join_Fahrer">&nbsp;</div>
						</div>
						<br />
						<div class="JoinWindowBlock">
							<div class="JoinWindowLable"><u>Abfahrt:</u></div>
							<div class="JoinWindowData" id="Join_Abfahrt">&nbsp;</div>
						</div>
						<br />
						<div class="JoinWindowBlock">
							<div class="JoinWindowLable"><u>Ankunft:</u></div>
							<div class="JoinWindowData" id="Join_Ankunft">&nbsp;</div>
						</div>
						<br /><br />
						<div class="JoinWindowBlock">
							<div class="JoinWindowLable"><u>Strecke:</u></div>
							<div class="JoinWindowData" id="Join_OrteListe">&nbsp;</div>
						</div>
					</div>
					<div id="map_canvas" style="float: left; width: 380px; height: 260px;">
						<!-- 11.06.2012 Markus: Google-Maps Window -->
					</div>
					<div style="clear: both;"></div>
			</div>
			<div id="MessageFooter">
				&nbsp;&nbsp;<input type="submit" name="tuEs" value="Mitfahren" onclick="Mitfahren();"></input>
				&nbsp;&nbsp;<input type="submit" name="tuEsNicht" value="Doch nicht" onclick="disablePopup();"></input>
			</div>
		</div>
		
	<!-- Login Fenster -->
		<div id="LoginWindow" class="isPopUp">
			<form id="loginForm" method="post">
			<div id="MessageHeader">&nbsp;</div>
			<div id="LoginWindowMain">
				<div id="LoginMessage">
				</div>
				<div>
					<div class="newLable">Benutzer</div>
					<div class="newInput"><input type="text" class="withhighlight" name="benutzername" value="" /></div>
				</div>
				<div>
					<div class="newLable">Passwort</div>
					<div class="newInput"><input type="password" class="withhighlight" name="passwort" value="" /></div>
				</div>
			</div>
			<div id="MessageFooter">
				&nbsp;&nbsp;<input type="submit" name="tuLogin" value="Anmelden"></input>
				&nbsp;&nbsp;<input type="reset" name="tuEsNicht" value="Doch nicht" onclick="disablePopup();"></input>
			</div>
			</form>
		</div>
		
	<!-- /div -->
	</body>
</html>